<template>
    <div>
        <!-- 按钮 -->
        <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0px;" @click="showDialog">添加</el-button>

        <!-- 表格组件 -->
        <el-table style="width: 100%" border :data="swiperList">
            <el-table-column type="index" label="序号" width="80px" align="center">
            </el-table-column>
            <el-table-column prop="des" label="描述" width="width">
            </el-table-column>
            <el-table-column prop="imgUrl" label="图片" width="width">
                <template slot-scope="{row,$index}">
                    <!-- row 作用插槽的数组回传 返回的是 data 数据  $index 数组索引-->
                    <!-- logoUrl 后端接口文档的数据 -->
                    <img :src="row.imgUrl" alt="" style="width: 100px;height: 100px;" />
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
                <template slot-scope="{row,$index}">
                    <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateSwiper(row)">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSwiper(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 
            分页器  
            当前第几页 数据总条数 每一页展示条数 连续页码数
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            current-page  代表的是当前第几页
            total 代表分页器一共需要展示数据条数
            page-size 代表每一页需要展示多少条数据
            page-sizes  代表可以设置每一页展示多少条数据
            layout 可以实现分页器布局
            pager-count 按钮的数量 如果 9 连续页码是 7
        -->
        <!-- 这里面的数据到时候接口调用成功之后要更改 -->
        <el-pagination style="margin-top: 20px;text-align: center;" :current-page="1" :total="total" :page-size="3"
            :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev,pager,next,jumper,->,total,sizes"
            @size-change="handleSizeChange" @current-change="getPageList">
        </el-pagination>

        <!--
             对话框 
             :visible.sync="dialogFormVisible" 控制对话框显示与隐藏
        -->
        <el-dialog :title="DialogTitle" :visible.sync="dialogFormVisible">
            <!-- form 表单  :model属性  作用是把表单的数据收集到这个对象身上 将来表单验证时 也需要这个属性-->
            <!-- form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可 -->
            <el-form style="width: 80%;" :model="Form" :rules="rules" ref="ruleForm">
                <el-form-item label="名称" label-width="100px" prop="des">
                    <el-input autocomplete="off" v-model="Form.des"></el-input>
                </el-form-item>
                <el-form-item label="图片" label-width="100px" prop="imgUrl">
                    <!-- 这里收集数据 不能使用v-model 因为不是表单元素
                        action 设置图片上传的地址
                        :on-success:可以检测到图片上传成功 当图片上传成功 执行一次
                        :before-upload 可以在上传图片之前 执行一次
                    -->
                    <!-- action="https://jsonplaceholder.typicode.com/posts/" 目前这个地址是虚假的 后期测试的时候得更换 -->
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="Form.imageUrl" :src="Form.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrupdateSwiper">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

export default {
    name: 'Swiper',
    data() {
        return {
            // 代表分页器第几页
            current: 1,
            // 当前页数展示数据条数
            size: 3,
            // 总共数据条数
            total: 0,
            // 列表展示的数据 即 data 一定是数组类型
            swiperList: [],
            // 标题
            DialogTitle: '添加轮播图',
            // 控制对话框显示与隐藏的属性
            dialogFormVisible: false,
            // 收集品牌信息  对象身上的属性不能瞎写  一切以后端接口参数为准
            Form: {
                // 一切以后端接口参数为准
                des: '',
                imgUrl: '',
            },
            // 表单验证规则
            rules: {
                // 品牌名称验证规则
                // required:必须校验的字段 (五角星标识) message:提示信息  trigger:用户行为设置（事件的设置 blur | change）
                des: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    // 品牌名称长度在 2-10 
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }
                ],
                // 品牌LOGO验证规则
                imgUrl: [
                    { required: true, message: '请选择品牌图片' }
                ],
            }
        }
    },
    // 组件挂载完毕发送请求
    mounted() {
        // 获取列表数据方法
        this.getSwiperList();
    },
    methods: {
        // 获取品牌列表的数据
        async getSwiperList(pager = 1) {
            this.current = pager;
            // 获取品牌列表的接口
            const { current, size } = this;
            let result = await this.$API.swiper.reqSwiperList({ current: current, size: size });
            if (result.code == 0) {
                this.total = result.data.total;
                this.swiperList = result.data.records;
            }
        },
        // 当分页器某一页需要展示数据条数发生变化时触发
        handleSizeChange(size) {
            // 整理参数
            this.size = size;
            this.getSwiperList()
        },
        // 点击添加品牌的按钮
        showDialog() {
            // 显示对话框
            this.dialogFormVisible = true;
            this.DialogTitle = '添加轮播图'
            this.Form = {
                name: '',
                logUrl: ''
            }
        },
        // 修改某一个品牌的数据
        updateSwiper(row) {
            // 显示对话框
            this.dialogFormVisible = true;
            this.DialogTitle = '修改轮播图'
            this.Form.des = row.des;
            this.Form.imageUrl = row.imageUrl;
        },
        // 删除某一个品牌的数据
        deleteSwiper(row) {
            // 删除弹窗
            // ES6 模板字符串
            this.$confirm('你确定删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 当用户点击确定按钮的时候触发
                // 这里执行删除品牌商品的业务逻辑 =>调用相应的API接口 最后弹出信息
                // 向服务器发起请求
                let result = await this.$API.swiper.reqDeleteSwiper([row.imgId]);
                if (result.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
                // 删除品牌成功之后 需要再次获取品牌列表进行展示
                // 重点
                this.getPageList(this.size.length > 1 ? this.current : this.current - 1);
            }).catch(() => {
                // 当用户点击删除按钮的时候触发
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 上传图片相关的回调
        // 图片上传成功
        handleAvatarSuccess(res, file) {
            // res 上传成功之后返回给前端的数据
            this.Form.imageUrl = res.data;
        },
        // 图片上传之前
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 添加按钮 (添加品牌 | 修改品牌)
        async addOrupdateSwiper() {
            if (this.DialogTitle === '添加轮播图') {
                console.log('添加轮播图');
                let result = await this.$API.swiper.reqAddSwiper(this.Form)
                if (result.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '添加轮播图成功'
                    })
                }
            } else {
                console.log('修改轮播图');
                let result = await this.$API.swiper.reqUpdateSwiper(this.Form)
                if (result.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '修改轮播图成功'
                    })
                }
            }
            // 当全部验证字段通过时 再去书写业务逻辑
            // this.$refs.ruleForm.validate(async (valid) => {
            //     if (valid) {
            //         this.dialogFormVisible = false
            //         if (this.DialogTitle === '添加轮播图') { 
            //             console.log('添加轮播图');
            //         }
            //         // 发送请求
            //         // let result = await this.$API.trademark.reqAddOrUpdateTradeMark(this.Form)
            //         // if (result.code == 200) {
            //         //     // 弹出信息：添加品牌成功 | 修改品牌成功
            //         //     this.$message({
            //         //         type: 'success',
            //         //         message: this.Form.id ? '修改轮播图成功' : '添加轮播图成功'
            //         //     })
            //         //     this.getSwiperList();
            //         //     this.DialogTitle = ''
            //         // }
            //     } else {
            //         console.log('error submit!!');
            //         return false;
            //     }
            // })

        }
    },
}

</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
